import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

Item {
    id: mainWindow
    visible: true
    width: 400
    height: 600

    // 使用ColumnLayout来管理垂直布局
    ColumnLayout {
        id: mainLayout
        anchors.fill: parent
        anchors.margins: 24
        spacing: 24

        // 页面标题
        Text {
            id: pageTitle
            text: "扫码登录"
            font.pixelSize: 24
            font.bold: true
            color: "#1d1d1f"
            Layout.alignment: Qt.AlignHCenter
            Layout.margins: 24
        }

        // 二维码容器
        Rectangle {
            id: qrCodeContainer
            Layout.preferredWidth: 240
            Layout.preferredHeight: 240
            Layout.alignment: Qt.AlignHCenter
            radius: 12
            color: "white"
            border.color: "#e0e0e0"
            border.width: 1

            // 二维码图像 - 使用绝对路径
            Image {
                id: qrCodeImage
                source:  "file:///F:\\OneDrive\\桌面\\bilibili-up\\bilibili-up\\qrcode.png" // 保持不变
                fillMode: Image.PreserveAspectFit
                width: 200
                height: 200
                anchors.centerIn: parent
            }
        }

        // 二维码状态提示
        Text {
            id: qrCodeStatus
            text: "请使用手机扫码登录"
            font.pixelSize: 16
            color: "#6e6e73"
            Layout.alignment: Qt.AlignHCenter
        }

        // 登录按钮 - 改进视觉效果和交互
        Button {
            id: loginButton
            text: "登录"
            Layout.fillWidth: true
            height: 50
            font.pixelSize: 18
            font.bold: true
            Layout.alignment: Qt.AlignHCenter
            Layout.margins: 12
            enabled: true

            onClicked: {
                console.log("登录按钮被点击")
                if (qrCodeStatus.text === "扫码成功，正在登录...") {
                    loginButton.text = "登录中..."
                    loginButton.enabled = false

                    setTimeout(function() {
                        console.log("登录成功")
                        loginButton.text = "登录成功"
                        loginButton.background.color = "#28a745"

                        setTimeout(function() {
                            console.log("跳转到主界面")
                        }, 1000)
                    }, 1500)
                } else {
                    qrCodeStatus.text = "请先使用手机扫码"
                    qrCodeStatus.color = "#ff3b30"
                }
            }
        }

        // 底部帮助链接 - 移到登录按钮下方
        Row {
            Layout.alignment: Qt.AlignHCenter
            spacing: 24
            Layout.margins: 8

            Text {
                id: helpLink
                text: "帮助"
                font.pixelSize: 14
                color: helpLink.hovered ? "#005ec1" : "#0071e3"
                MouseArea {
                    id: helpMouseArea
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    property bool hovered: false

                    onEntered: helpLink.hovered = true
                    onExited: helpLink.hovered = false

                    onClicked: {
                        console.log("帮助链接被点击")
                        Qt.openUrlExternally("https://example.com/help")
                    }
                }
            }

            Text {
                id: feedbackLink
                text: "反馈"
                font.pixelSize: 14
                color: feedbackLink.hovered ? "#005ec1" : "#0071e3"
                MouseArea {
                    id: feedbackMouseArea
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    property bool hovered: false

                    onEntered: feedbackLink.hovered = true
                    onExited: feedbackLink.hovered = false

                    onClicked: {
                        console.log("反馈链接被点击")
                        Qt.openUrlExternally("https://example.com/feedback")
                    }
                }
            }
            // 记住登录状态的复选框 - 改进样式和交互
            CheckBox {
                id: rememberLoginCheckBox
                text: "下次免扫码"
                font.pixelSize: 14
                Layout.alignment: Qt.AlignHCenter
                Layout.margins: 4
                onClicked: {
                    console.log("记住登录状态: " + checked)

                    if (checked) {
                        localStorage.setItem("rememberLogin", "true")
                    } else {
                        localStorage.removeItem("rememberLogin")
                    }
                }
            }
        }
    }
}
